<template>
  <div>
    <div class="cs-filter-container">
      <el-select v-model="listQuery.propType" clearable multiple filterable placeholder="属性类型">
        <el-option label="钻石" value="钻石" />
        <el-option label="视频卡" value="视频卡" />
        <el-option label="语音卡" value="语音卡" />
        <el-option label="积分" value="积分" />
        <el-option label="积分+" value="积分+" />
        <el-option label="私聊券" value="私聊券" />
      </el-select>
      <el-select
        v-model="listQuery.reason"
        clearable
        multiple
        filterable
        placeholder="请选择属性变化原因"
      >
        <el-option
          v-for="option in reasons"
          v-if="(option.onShow === 1 && listQuery.propType.length === 0) || (option.onShow === 1 && listQuery.propType.indexOf(typeItems[option.parent]) > -1)"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
      <el-date-picker
        v-model="daterangeValue"
        :picker-options="daterangePickerOptions"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="起始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd"
        @change="daterangeChangedTimestamp"
      />
      <el-button
        type="primary"
        size="small"
        icon="el-icon-search"
        @click="getProp"
      >
        搜索
      </el-button>
      <el-button
        type="info"
        size="small"
        icon="el-icon-refresh-right"
        @click="resetFilter"
      >
        重置
      </el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="prop"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="用户渠道">
          <template slot-scope="{ row }">{{ row.channel }}</template>
        </el-table-column>
        <el-table-column align="center" label="属性类型">
          <template slot-scope="{ row }">{{ row.propType }}</template>
        </el-table-column>
        <el-table-column align="center" label="属性变化原因">
          <template slot-scope="{ row }">{{ row.changeReason }}</template>
        </el-table-column>
        <el-table-column align="center" label="新值">
          <template slot-scope="{ row }">{{
            row.propType | propCompute(row.newValue)
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="变化值">
          <template slot-scope="{ row }">{{
            row.propType | propCompute(row.change)
          }}</template>
        </el-table-column>
        <el-table-column align="center" label="变化时间">
          <template slot-scope="{ row }">{{
            row.changeTime | parseTime
          }}</template>
        </el-table-column>
      </el-table>
      <TablePagination
        :current-page="listQuery.page"
        :limit="listQuery.limit"
        :total="propTotal"
        :loading="listLoading"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChangeOffset"
      />
    </div>
  </div>
</template>
<script>
import TablePagination from '@/components/TablePagination'
import { xhrPropChangeOptions, xhrPropChangeList } from '@/api/account'
export default {
  components: { TablePagination },
  filters: {
    propCompute(type, val) {
      switch (type) {
        case '钻石':
          return val / 10
        case '积分':
          return val / 100
        case '积分+':
          return val / 100
        default:
          return val
      }
    }
  },
  propCompute(type, val) {
    switch (type) {
      case '钻石':
        return val / 10
      case '积分':
        return val / 100
      case '积分+':
        return val / 100
      default:
        return val
    }
  },
  data() {
    const query = this.$route.query
    return {
      listQuery: {
        limit: 20,
        offset: 0,
        userId: (query && query.id) || null,
        targetId: null,
        startTime: null,
        endTime: null,
        propType: [],
        reason: []
      },
      defaultQueryParams: {
        limit: 20,
        offset: 0,
        userId: (query && query.id) || null
      },
      daterangeValue: [],
      channels: null,
      types: null,
      reasons: null,
      typeItems: {},
      prop: [],
      propTotal: 0
    }
  },
  created() {
    xhrPropChangeOptions().then(resp => {
      this.channels = resp.data.channels
      this.types = resp.data.types
      this.reasons = resp.data.reasons
      for (let i in resp.data.types){
        this.typeItems[resp.data.types[i].id] = resp.data.types[i].label
      }
      this.getProp()
    })
  },
  methods: {
    doSearch() {
      this.getProp()
    },
    getProp() {
      if (this.propType) {
        this.listQuery.propType = [this.propType]
      }
      const params = {
        userId: this.listQuery.userId,
        offset: this.listQuery.offset,
        limit: this.listQuery.limit,
        startTime: this.listQuery.startTime,
        endTime: this.listQuery.endTime,
        channel: this.listQuery.channel,
        propType:
          (this.listQuery.propType && this.listQuery.propType.join(',')) ||
          null,
        reason:
          (this.listQuery.reason && this.listQuery.reason.join(',')) || null
      }
      xhrPropChangeList(params)
        .then(resp => {
          this.prop = resp.data.list
          this.propTotal = resp.data.count
        })
        .catch(err => {
          this.$message.error(err)
        })
    }
  }
}
</script>
